<template>
  <view :class="[`${prefixCls}-share-container`]" @touchmove.stop.prevent="">
    <!-- 分享工具 -->
    <uv-popup ref="sharePopupModal" mode="bottom" zIndex="999" :closeOnClickOverlay="false" @change="onChangePopup">
      <view class="share-wrap">
        <view class="share-body">
          <uv-button class="share-item" open-type="share" @click="onShareByForward" v-if="canShareForward('forward')">
            <image class="share-img" :src="$CDN('/common/static/images/share/share_wx.png')"></image>
            <text class="share-title">分享到微信</text>
          </uv-button>
          <uv-button class="share-item" @click="onShareByPoster" v-if="canShareForward('poster')">
            <image class="share-img" :src="$CDN('/common/static/images/share/share_poster.png')"></image>
            <text class="share-title">生成海报</text>
          </uv-button>

          <!-- #ifdef H5 -->
          <uv-button class="share-item" @click="onShareByCopyLink" v-if="canShareForward('link')">
            <image class="share-img" :src="$CDN('/common/static/images/share/share_link.png')"></image>
            <text class="share-title">复制链接</text>
          </uv-button>
          <!-- #endif -->
        </view>
        <view class="share-footer">
          <uv-button @click="closeShareModal">取消</uv-button>
        </view>
      </view>
    </uv-popup>

    <!-- 分享海报 -->
    <cu-poster ref="canvasPoster" :posterJson="sharePosterConfig" :shareInfo="shareInfo" :shareMethods="shareMethods" />
  </view>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'

export default {
  name: 'cuShareModal',
  components: {},
  mixins: [],
  props: {
    shareInfo: {
      type: Object,
      default: () => ({}),
    },

    // 分享海报图配置 参考cu-poster组件components/poster.js
    sharePosterConfig: {
      type: Object,
      default: () => ({}),
    },

    shareMethods: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {
    // 监听是否弹出授权弹窗
    shareModal(nv) {
      if (nv) this.openShareModal()
      else this.closeShareModal()
    },
  },
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'shareModal', 'platform']),

    shareConfig() {
      return this.platform.share
    },

    canShareForward(method) {
      return (method) => {
        return this.platform.share.methods.includes(method) && this.shareMethods.includes(method)
      }
    },
  },

  created() {},
  mounted() {},
  destroyed() {},
  options: {
    styleIsolation: 'shared',
  },
  methods: {
    ...mapActions('modal', ['SetShareModal']),

    // open-share-guide
    openShareGuide() {
      this.$refs.posterShareGuide.openShareGuide()
    },

    // close-share-guide
    closeShareGuide() {
      this.$refs.posterShareGuide.closeShareGuide()
    },

    // open-share-modal
    openShareModal() {
      this.$refs.sharePopupModal.open()
    },

    // close-share-modal
    closeShareModal() {
      this.SetShareModal(false)
      this.$refs.sharePopupModal.close()
    },

    onShareByForward() {
      this.closeShareModal()

      this.$Platform.share.shareForwardWechat({ vm: this })
    },
    onShareByPoster() {
      this.$Auth({
        cb: () => {
          this.$refs.canvasPoster.onOpenPoster()
          this.closeShareModal()
        },
      })
    },
    onShareByCopyLink() {
      console.log(this.shareInfo)
      this.$Helper.copyText(this.shareInfo.link)
      this.closeShareModal()
    },

    onChangePopup(e) {
      // console.log(e)
      // 若启用pages.js中配置底部菜单则释放此处注释
      // const { path } = this.$Route
      // if (TABBAR.includes(path)) {
      //   this.shareModal ? uni.hideTabBar() : uni.showTabBar()
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('share-container')} {
  .guide-wrap {
    padding: 40rpx 30rpx;
    text-align: center;
  }
  .share-wrap {
    position: relative;
    padding: 40rpx 30rpx;
    .share-body {
      @include flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 60rpx;
      ::v-deep {
        .uv-button {
          height: auto;
          @include flex(column);
        }
        .uv-button--normal {
          padding: 20rpx 24rpx;
        }
        .uv-button--active::before {
          opacity: 0.08;
        }
        .uv-button--hairline {
          border: none;
        }
      }
      .share-img {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
      }
      .share-title {
        font-size: 24rpx;
        color: $uv-content-color;
      }
    }
  }
}
</style>
